<template>
	<view class="index-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="false" color="#fff" :title="title"></uni-navbar></view>
		<view class="logo-box">
			<view class="logo-ttl">
				<view class="h1" :style="{ 'margin-top': statusBarHeight }">{{ title }}</view>
				<view class="banner"><u-swiper :list="swiperList" mode="none" height="280" @click="swiperClick"></u-swiper></view>
				<view class="bg-img"><image src="/static/img/bg_02.png" mode="widthFix"></image></view>
			</view>
		</view>

		<!-- <u-notice-bar class="notice-bar" mode="vertical" :list="list"></u-notice-bar> -->

		<view class="index-card" v-if="userInfo.username && !userInfo.userInfo.nickName">
			<u-row class="card-link" gutter="0" align="top">
				<u-col span="3" v-if="$sysMenus('tabl')">
					<navigator hover-class="none" class="link-item" url="/pagesB/proposal/index">
						<image class="image" src="/static/img/index_icon_01.png" mode="scaleToFill"></image>
						<!-- 人大建议 -->
					</navigator>
				</u-col>
				<u-col span="3" v-if="$sysMenus('tzgg_top')">
					<navigator hover-class="none" class="link-item" url="/pagesB/notice/list">
						<image class="image" src="/static/img/index_icon_03.png" mode="scaleToFill"></image>
						<!-- 通知公告 -->
					</navigator>
				</u-col>
				<u-col span="3" v-if="$sysMenus('perform')" @click="perform()">
					<view hover-class="none" class="link-item">
						<image class="image" src="/static/img/index_icon_04.png" mode="scaleToFill"></image>
						<!-- 履职管理 -->
					</view>
				</u-col>
				<u-col span="3" v-if="$sysMenus('mqxs')">
					<navigator hover-class="none" class="link-item" url="/pagesA/clue/list">
						<image class="image" src="/static/img/index_icon_02.png" mode="scaleToFill"></image>
						<!-- 民情线索 -->
					</navigator>
				</u-col>
			</u-row>
		</view>

		<block v-if="userInfo.username">
			<view class="code-box" v-if="userInfo.userInfo.nickName">
				<!-- 有事找代表 -->
				<view class="code-item" @click="goTo('/pagesB/will/index')"><image class="image" src="/static/img/nav_05.png" mode="scaleToFill"></image></view>
				<!-- 我的问题 -->
				<view class="code-item" @click="goTo('/pagesB/will/list')"><image class="image" src="/static/img/nav_04.png" mode="scaleToFill"></image></view>
			</view>
			<view class="code-box" v-else-if="!$roleCodes('xiaozuguanliyuan')">
				<!-- 问题列表 -->
				<view class="code-item" @click="goTo('/pagesB/will/list')"><image class="image" src="/static/img/nav_06.png" mode="scaleToFill"></image></view>
				<!-- 统计分析 -->
				<view class="code-item" @click="goTo('/pagesB/will/statistics')"><image class="image" src="/static/img/nav_07.png" mode="scaleToFill"></image></view>
			</view>
		</block>
		<block v-else>
			<view class="code-box">
				<!-- 有事找代表 -->
				<view class="code-item" @click="goTo('/pagesB/will/index')"><image class="image" src="/static/img/nav_05.png" mode="scaleToFill"></image></view>
				<!-- 我的问题 -->
				<view class="code-item" @click="goTo('/pagesB/will/list')"><image class="image" src="/static/img/nav_04.png" mode="scaleToFill"></image></view>
			</view>
		</block>

		<view class="code-box">
			<navigator hover-class="none" class="code-item" url="/pages/news/index">
				<image class="image" src="/static/img/nav_02.png" mode="scaleToFill"></image>
				<!-- 媒体矩阵 -->
			</navigator>
			<navigator hover-class="none" class="code-item" url="/pages/bbq/index">
				<image class="image" src="/static/img/nav_01.png" mode="scaleToFill"></image>
				<!-- 书香人大 -->
			</navigator>
		</view>

		<view class="container" style="margin-top: 10rpx; background-color: #fff">
			<u-tabs class="uTabs" :list="tabList" bgColor="#fff" barWidth="84" barHeight="8" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs>

			<block v-if="current == 0">
				<view class="list-box" :class="Gzdt.loading == 'nodata' ? 'nodata' : ''">
					<view class="list-info_02" v-for="(item, index) of Gzdt.list" :key="index" @click="navTo('/pagesA/comG/detail?id=' + item.id)">
						<view class="left">
							<view class="info-title">{{ item.title }}</view>
							<view class="info-btm">
								{{ item.pubName }}
								<text class="line"></text>
								{{ item.pubTime | parseTime('{y}-{m}-{d}') }}
							</view>
						</view>
						<view class="right"><image class="image" :src="$imgRegxF(item.content)" mode="aspectFill"></image></view>
					</view>

					<u-loadmore :status="Gzdt.loading" />
				</view>
			</block>
			<block v-if="current == 1">
				<view class="list-box" :class="Wyfc.loading == 'nodata' ? 'nodata' : ''">
					<view class="list-info_02" v-for="(item, index) of Wyfc.list" :key="index" @click="navTo('/pagesA/comW/detail?id=' + item.id)">
						<view class="left">
							<view class="info-title">{{ item.title }}</view>
							<view class="info-btm">
								{{ item.createByName }}
								<text class="line"></text>
								{{ item.pubDate | parseTime('{y}-{m}-{d}') }}
							</view>
						</view>
						<view class="right"><image class="image" :src="$imgRegxF(item.content)" mode="aspectFill"></image></view>
					</view>

					<u-loadmore :status="Wyfc.loading" />
				</view>
			</block>
			<block v-if="current == 2">
				<view class="list-box" :class="Zqzz.loading == 'nodata' ? 'nodata' : ''">
					<view class="list-info_02" v-for="(item, index) of Zqzz.list" :key="index" @click="navTo('/pagesA/comZ/detail?id=' + item.id)">
						<view class="left">
							<view class="info-title">{{ item.title }}</view>
							<view class="info-btm">
								{{ item.pubName }}
								<text class="line"></text>
								{{ item.pubTime | parseTime('{y}-{m}-{d}') }}
							</view>
						</view>
						<view class="right"><image class="image" :src="$imgRegxF(item.content)" mode="aspectFill"></image></view>
					</view>

					<u-loadmore :status="Zqzz.loading" />
				</view>
			</block>
		</view>

		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			scrollTop: 0,
			statusBarHeight: '0',
			title: '潍城人大',
			text: '',
			list: [],
			swiperList: [],
			swiperImage: '/static/img/bg_03.png',
			current: 0,
			tabList: [
				{
					name: '工作动态',
					count: '0'
				},
				{
					name: '代表风采',
					count: '0'
				},
				{
					name: '知情知政',
					count: '0'
				}
			],
			menus: [],
			Gzdt: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				fnFlag: '2',
				dataType: '2',
				loaded: false,
				loading: 'loadmore'
			},
			Wyfc: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				wyfc: {
					nodeStatus: '2',
					status: ''
				},
				loaded: false,
				loading: 'loadmore'
			},
			Zqzz: {
				list: [],
				pageNum: 1,
				pageSize: 10,
				fnFlag: '2',
				dataType: '1',
				loaded: false,
				loading: 'loadmore'
			}
		};
	},
	onLoad() {
		this.loadLogin();
		this.loadData();

		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'rpx';
		console.log(this.statusBarHeight);
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onShow() {
		this.loadLogin();
		this.loadData();
	},
	onShareAppMessage(res) {
		return {
			title: this.title,
			path: '/pages/index/index',
			imageUrl: '/static/img/share.png'
		};
	},
	onShareTimeline(res) {
		return {};
	},
	onReachBottom() {
		if (this.current == 0 && this.Gzdt.loading == 'loadmore') this.loadGzdt('add');
		if (this.current == 1 && this.Wyfc.loading == 'loadmore') this.loadWyfc('add');
		if (this.current == 2 && this.Zqzz.loading == 'loadmore') this.loadZqzz('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		...mapState(['userInfo', 'sysUser'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.roleCodes = this.userInfo.roleCodes.join(',');
				this.userId = this.userInfo.sysUser.id;
				this.title = `潍城人大`;

				uni.setNavigationBarTitle({
					title: this.title
				});
			} else {
				this.clientCode = '370702';
			}
		},
		loadData(type = 'add') {
			this.getBanner();
			this.getBaiduToken();

			this.loadZqzz(type);
			this.loadGzdt(type);
			this.loadWyfc(type);
		},
		loadGzdt(type = 'add') {
			if (type == 'add') {
				if (this.Gzdt.loading == 'nomore') {
					return false;
				}
				this.Gzdt.loading = 'loading';
			} else {
				this.Gzdt.loading = 'loading';
			}
			if (type != 'add') {
				this.Gzdt.pageNum = 1;
			}
			let data = {
				pageNum: this.Gzdt.pageNum,
				pageSize: this.Gzdt.pageSize,
				clientCode: this.clientCode,
				dataType: this.Gzdt.dataType,
				fnFlag: this.Gzdt.fnFlag
			};
			this.$request('/tongzhigonggao/knowDP/list', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Gzdt.list = [];
				}

				this.Gzdt.loading = this.Gzdt.pageNum < Math.ceil(res.data.total / this.Gzdt.pageSize) ? 'loadmore' : 'nomore';
				this.Gzdt.pageNum = this.Gzdt.pageNum + 1;
				this.Gzdt.list = this.Gzdt.list.concat(res.data.records);
				this.Gzdt.loaded = true;
				if (this.Gzdt.list.length <= 0) {
					this.Gzdt.loading = 'nodata';
				}
			});
		},
		loadWyfc(type = 'add') {
			if (type == 'add') {
				if (this.Wyfc.loading == 'nomore') {
					return false;
				}
				this.Wyfc.loading = 'loading';
			} else {
				this.Wyfc.loading = 'loading';
			}
			if (type != 'add') {
				this.Wyfc.pageNum = 1;
			}
			let data = {
				pageNum: this.Wyfc.pageNum,
				pageSize: this.Wyfc.pageSize,
				clientCode: this.clientCode,
				wyfc: this.Wyfc.wyfc
			};
			this.$request('/wyfc/list', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Wyfc.list = [];
				}

				this.Wyfc.loading = this.Wyfc.pageNum < Math.ceil(res.data.total / this.Wyfc.pageSize) ? 'loadmore' : 'nomore';
				this.Wyfc.pageNum = this.Wyfc.pageNum + 1;
				this.Wyfc.list = this.Wyfc.list.concat(res.data.records);
				this.Wyfc.loaded = true;
				if (this.Wyfc.list.length <= 0) {
					this.Wyfc.loading = 'nodata';
				}
			});
		},
		loadZqzz(type = 'add') {
			if (type == 'add') {
				if (this.Zqzz.loading == 'nomore') {
					return false;
				}
				this.Zqzz.loading = 'loading';
			} else {
				this.Zqzz.loading = 'loading';
			}
			if (type != 'add') {
				this.Zqzz.pageNum = 1;
			}
			let data = {
				pageNum: this.Zqzz.pageNum,
				pageSize: this.Zqzz.pageSize,
				clientCode: this.clientCode,
				dataType: this.Zqzz.dataType,
				fnFlag: this.Zqzz.fnFlag
			};
			this.$request('/tongzhigonggao/knowDP/list', data).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.Zqzz.list = [];
				}

				this.Zqzz.loading = this.Zqzz.pageNum < Math.ceil(res.data.total / this.Zqzz.pageSize) ? 'loadmore' : 'nomore';
				this.Zqzz.pageNum = this.Zqzz.pageNum + 1;
				this.Zqzz.list = this.Zqzz.list.concat(res.data.records);
				this.Zqzz.loaded = true;
				if (this.Zqzz.list.length <= 0) {
					this.Zqzz.loading = 'nodata';
				}
			});
		},
		getBanner() {
			this.$request('/banner/list', {
				clientCode: this.clientCode,
				userId: this.userId,
				banner: {
					enable: '1'
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.swiperList = [];
				res.data.records.forEach((item) => {
					if (item.fileList && item.fileList.length > 0) {
						this.swiperImage = this.$imagePreview(item.fileList[0].path);
						this.swiperList.push({
							id: item.id,
							title: item.title,
							url: item.externalLink,
							image: this.$imagePreview(item.fileList[0].path)
						});
					}
				});
			});
		},
		getBaiduToken() {
			this.$request('/baidu/ttsToken', {
				clientCode: this.clientCode,
				userId: this.userId
			}).then((res) => {
				uni.setStorageSync('baiduToken', res.data);
			});
		},
		ycxs() {},
		perform() {
			if (this.$sysMenus('perform_eval_group')) {
				uni.navigateTo({
					url: '/pagesA/duties/index'
				});
			} else {
				//判断是否代表团
				if (this.$roleCodes('xiaozuguanliyuan')) {
					let wyhdz = this.userInfo.userInfo.wyhdz;
					if (wyhdz == null || wyhdz == '') {
						wyhdz = this.userInfo.userInfo.remark4;
					}
					uni.navigateTo({
						url: '/pagesA/duties/group?wyhdz=' + wyhdz
					});
				} else {
					uni.navigateTo({
						url: '/pagesA/duties/self'
					});
				}
			}
		},
		tabsChange(index) {
			this.current = index;
		},
		news() {
			uni.navigateTo({
				url: '/pages/news/list'
			});
		},
		system() {
			uni.navigateTo({
				url: '/pagesB/speech/list'
			});
		},
		scan() {
			uni.scanCode({
				onlyFromCamera: true,
				success: (res) => {
					this.$qrcodeResult(res);
				}
			});
		},
		notice() {
			uni.navigateTo({
				url: '/pagesB/notice/list'
			});
		},
		goTo(url) {
			if (this.userInfo.sysUser) {
				uni.navigateTo({
					url: url
				});
			} else {
				this.$store.commit('logout');
				uni.showModal({
					title: '提示',
					content: '请先登录？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/index'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.logo-box {
	// text-align: center;

	.logo-ttl {
		position: relative;
		padding: 50rpx 30rpx 20rpx;
		// height: 500rpx;
	}

	.h1 {
		position: relative;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		line-height: 64rpx;
		z-index: 1;
	}

	.h1-img {
		position: relative;
		margin: 250rpx auto 0;
		width: 706rpx;
		height: 216rpx;
		z-index: 1;

		.image {
			width: 706rpx;
			height: 216rpx;
		}
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
	}

	.bg-img_small {
		position: relative;
		margin: 80rpx auto 0;
		width: 680rpx;
		height: 280rpx;
		z-index: 10;
	}
}

.code-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 30rpx;

	.code-item {
		position: relative;
		width: 50%;
		z-index: 1;

		.image {
			width: 100%;
			height: 200rpx;
		}
	}
}

.banner {
	position: relative;
	margin: 80rpx auto 0;
	min-height: 280rpx;
	z-index: 10;
}

.uTabs {
	padding: 10rpx 0;
	display: block;
}

.notice-bar {
}

.new-box {
	padding: 10rpx 0 30rpx;
	width: 100%;
}

.search-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.filter-btn {
	margin: 30rpx auto 0;
	width: 160rpx;

	&.u-size-default {
		font-size: 14px;
		height: 55rpx;
		line-height: 55rpx;
	}

	&.u-btn--default {
		color: #666;
		border-color: #f9f8f6;
		background-color: #f9f8f6;

		&::after {
			border-color: #f9f8f6;
		}
	}
}

.index-card {
	margin: 0 30rpx;
	// padding: 0 0 30rpx;
	// border-top: 20rpx solid #f6f7fb;
	// background-color: #fff;

	.card-link {
		.image {
			width: 158rpx;
			height: 146rpx;
		}

		.link-item {
			margin: 0 auto 20rpx;
			width: 158rpx;
			font-size: 13px;
			line-height: 1;
			text-align: center;
		}
	}
}

.pro-row {
	.pro-title {
		margin-bottom: 20rpx;
		font-size: 15px;
		color: #e5231a;
	}
}

.list-info_02 .right {
	&.bg1 {
		background-image: url($staticUrl + '/static/img/sheqingminyi1.png');
	}

	&.bg2 {
		background-image: url($staticUrl + '/static/img/sheqingminyi2.png');
	}
}

.list-info_08 .right {
	&.bg1 {
		background-image: url($staticUrl + '/static/img/sheqingminyi1.png');
	}

	&.bg2 {
		background-image: url($staticUrl + '/static/img/sheqingminyi2.png');
	}
}

.link-more {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20rpx 30rpx;
	color: #666;
	text-align: center;

	.icon {
		margin-right: 10rpx;
	}
}

.nodata {
	width: 100%;
	padding-top: 60rpx;
	padding-bottom: 60rpx;
	font-size: 16px;
	color: #999;
	text-align: center;
}
</style>
